﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        //不使用委托
        function normal() {
            var item1 = document.getElementById("item1");
            var item2 = document.getElementById("item2");
            var item3 = document.getElementById("item3");

            item1.onclick = function () {
                alert("hello");
            }

            item2.onclick = function () {
                alert("hi");
            }

            item3.onclick = function () {
                alert("good");
            }
        }

        //使用委托
        function delegate() {
            var main = document.getElementById("main");
            main.onclick = function (event) {
                var target = event.target;

                switch (target.id) {
                    case "item1": alert("hello"); break;
                    case "item2": alert("hi"); break;
                    case "item3": alert("good"); break;
                }
            }
        }
        window.onload = normal;
       // window.onload = delegate;
    </script>
</head>
<body>
    <ul id="main">
        <li id="item1"> item1 </li>
        <li id="item2"> item2 </li>
        <li id="item3"> item3 </li>
    </ul>
</body>
</html>
